<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.8/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
        .layui-form-checkbox[lay-skin=primary] span {
            padding-left: 22px;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">角色名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="id_input_name" lay-verify="required" lay-reqtext="角色名不能为空" placeholder="请输入角色名" value="" class="layui-input" style="width: 400px;">
            <tip>填写角色的名称。</tip>
        </div>
    </div>

    <div class="layui-form-item">
        <table class="layui-hide" id="id_module" lay-filter="moduleTableFilter"></table>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script src="/lib/layui-v2.6.8/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
    layui.use(['form', 'table'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            $ = layui.jquery;

        $.get('/admin/user/getCurrent', {}, function (re) {
            if (re.code == 0) {
                layui.use('watermark', function (watermark) {
                    watermark({watermark_txt: re.data.name});
                });
            }
        }, 'json');

        let id = layui.router().search.id;
        let moduleNum = 0;

        table.render({
            elem: '#id_module',
            url: '/admin/page/moduleAndActions',
            request: {},
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'module', width: 240, title: '模块'},
                {title: '权限', templet: function (row) {
                    let html = '';
                    for (let i in row.actions) {
                        ++moduleNum;
                        html += '<input type="checkbox" name="module[]" title="' + row.actions[i] + '" lay-skin="primary" value="' + row.module + '@' + row.actions[i] + '" />  ';
                    }
                    return html;
                }}
            ]],
            page: false,
            skin: 'line',
            done: function () {
                $('body, html').animate({
                    scrollTop: 0
                }, 100);
                if (id > 0) { // 初始化数据
                    $.get('/admin/role/info', {'id': id}, function (re) {
                        if (re.code == 0) {
                            $('#id_input_name').val(re.data.name);
                            let roleModule = JSON.parse(re.data.module || '[]');
                            $(':checkbox[name="module[]"]').each(function () {
                                if ($.inArray($(this).attr('value'), roleModule) >= 0) {
                                    $(this).prop('checked', true);
                                }
                            });
                            form.render();
                        } else {
                            layer.alert(re.msg);
                        }
                    }, 'json');
                }
            }
        });

        // 监听表格复选框选择
        table.on('checkbox(moduleTableFilter)', function (obj) {
            if (obj.type == 'all') {
                $(':checkbox[name="module[]"]').prop('checked', obj.checked);
            } else {
                let lineModules = [];
                for (let i in obj.data.actions) {
                    lineModules.push(obj.data.module + '@' + obj.data.actions[i]);
                }
                $(':checkbox[name="module[]"]').each(function () {
                    if ($.inArray($(this).attr('value'), lineModules) >= 0) {
                        $(this).prop('checked', obj.checked);
                    }
                });
            }
            form.render();
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let i = 0;
            let module = [];
            while (i < moduleNum) {
                let key = 'module[' + i + ']';
                if (key in data.field) {
                    module.push(data.field[key]);
                    delete data.field[key];
                }
                ++i;
            }
            data.field.module = JSON.stringify(module);
            let url = '/admin/role/create';
            if (id > 0) {
                url = '/admin/role/update';
                data.field.id = id;
            }
            if ('layTableCheckbox' in data.field) {
                delete data.field['layTableCheckbox'];
            }
            $.post(url, data.field, function (re) {
                let msg = '';
                if (re.code == 0) {
                    msg = '保存成功';
                } else {
                    msg = re.msg;
                }
                let index = layer.alert(msg, {
                    title: '保存结果'
                }, function () {
                    layer.close(index);
                    if (re.code == 0) {
                        parent.layui.table.reload('currentTableId');
                        let iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);
                    }
                });
            }, 'json');
            return false;
        });

    });
</script>
</body>
</html>